<template>
  <div class="configMenu">
    <el-menu
        :default-active="state.activeMenu"
        text-color="#4E5D78"
        active-text-color="#377DFF"
        mode="horizontal"
        @select="jump"
        :ellipsis="false"
    >
      <subMenu :menuData="state.menuData"></subMenu>
    </el-menu>
  </div>
</template>

<script setup>
import {reactive, computed} from "vue";
import {useStore} from 'vuex'
import {useRouter, useRoute} from "vue-router"
import subMenu from './subMenu.vue'

const router = useRouter();
const route = useRoute();
const {getters} = useStore();
const state = reactive({
  isCollapse: true,
  menuData: getters['userMessage/getConfigMenu'],
  activeMenu: computed(()=>{
    return route.name
  })
})

const jump = (url)=>{
  if (url === '')  return;
  router.push(url);
}
</script>

<style scoped lang="scss">
.configMenu {
  margin-right: pxTvw(8);
  height: pxTvh(46);
  :deep(.el-menu) {
    height: 100%;
    border-bottom: none;
    .el-menu-item {
      margin: 0 pxTvw(24);
      padding: 0 pxTvw(3);
      @include computed_font(14);
      line-height: pxTvh(46);
      em{
        margin-right: pxTvw(10);
        @include computed_font(18);
      }
    }
    .el-menu-item.is-disabled{
      opacity: .5;
    }
    .el-sub-menu{
      margin: 0 pxTvw(24);
      .el-sub-menu__title{
        padding: 0 pxTvw(3);
        @include computed_font(14);
        line-height: pxTvh(46);
        em{
          margin-right: pxTvw(10);
          @include computed_font(18);
        }
      }
    }
  }
}
</style>
